<!-- 
作者:wisher
时间:2023/6/25
页面:搜索展示

 -->
<template>
	<view style="height: 100vh;overflow-y: scroll;overflow-x: hidden;">
		<view id="tittleBar" style="z-index: 99999;position:sticky;top: 0;padding-bottom: 30rpx;" class="tittleBar_bg">
			<view v-if="!menuButton" class="status_bar"></view>
			<view v-else :style="menuButton?`height:${menuButton.top}px;`:''"></view>
			<view class="searchBar" :style="menuButton?`height:${menuButton.height}px;margin-top:0`:''">
				<view style="padding-right: 10px;" @click="backPage">
					<uni-icons type="back" size="45rpx" color="#333"></uni-icons>
				</view>
				<view class="searchBox" :style="menuButton?`border-radius:${menuButton.height/2}px;`:''">
					<input class="searchPush_item" @confirm="search" v-model="input" type="text" confirm-type="search"
						focus searchPush_item>
					<view v-show="input!=''" @click="input='';searchData=null"><uni-icons type="closeempty" size="40rpx"
							color="#aaa"></uni-icons></view>
				</view>
				<view v-if="!searchData" style="padding-left:10px;">
					<view @click="backPage" v-if="input==''">取消</view>
					<view v-else @click="search">搜索</view>
				</view>
				<view :style="menuButton?`width:calc(60rpx + ${menuButton.width}px)`:''"></view>
			</view>
		</view>
		<view v-if="searchData" style="padding:0 30rpx;">
			<view v-for="v in searchData" :key="v.vod_id" @click="toInfoPage(v)" style="margin-bottom: 30rpx;">
				<view style="display: flex;align-items: center;overflow: hidden;">
					<view style="width: 200rpx;height: 280rpx;overflow: hidden;flex-shrink: 0;position: relative;">
						<image style="border-radius: 10rpx;width: 100%;height: 100%;" :src="v.vod_pic"
							mode="aspectFill"></image>
					</view>
					<view style="padding-left: 20rpx;font-size: 25rpx;">
						<p style="font-weight: 600;font-size: 40rpx;padding-bottom: 20rpx;">{{v.vod_name}}</p>
						<view style="padding-bottom: 10rpx;display: flex;align-items: center;">
							<view v-for="(cv,i) in v.vod_class.split(',')" :key="i"
								style="background: #eee;padding: 5rpx 15rpx;margin-right: 10rpx;border-radius: 5rpx;">
								{{cv}}
							</view>
						</view>
						<text>{{v.vod_year}} · {{v.type_name}} · {{v.vod_area}}</text>
						<view style="height: 10rpx;"> </view>
						<text style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
							{{v.vod_remarks.replace(/,/g,' ')}}
						</text>
					</view>
				</view>
			</view>
		</view>
		<view v-else style="padding:0 30rpx;">
			<view style="display: flex;align-items: center;justify-content: space-between;margin-bottom: 20rpx;">
				<view class="module_tittle">历史</view>
				<view @click="delHistry"><uni-icons type="trash" size="40rpx"></uni-icons></view>
			</view>
			<scroll-view class="scroll-view_H" scroll-x="true">
				<view @click="input=v;search()" v-for="v in searchHistry" :key="v"
					style="border-radius: 30rpx;padding: 10rpx 30rpx;background: #f3f3f3;font-size: 28rpx;display: inline-block;margin-right: 30rpx;min-width:50rpx;max-width: 180rpx;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;text-align: center;">
					{{v}}
				</view>
			</scroll-view>
		</view>
		<uv-loading-page :loading="loading" loading-text="搜索中..." font-size="24rpx"></uv-loading-page>
	</view>
</template>

<script>
	import api from '@/static/api.js'
	export default {
		data() {
			return {
				menuButton: null,
				input: "",
				searchData: null,
				searchHistry: [],
				loading: false
			}
		},
		onReady: function(res) {
			//各平台适配
			//#ifndef APP-PLUS || H5
			this.menuButton = uni.getMenuButtonBoundingClientRect()
			console.log(this.menuButton)
			//#endif 
		},
		onLoad() {
			let this_ = this
			uni.getStorage({
				key: 'searchHistry',
				success: function(res) {
					this_.searchHistry = res.data || []
				}
			});
		},
		methods: {
			delHistry() {
				this.searchHistry = []
				uni.setStorage({
					key: 'searchHistry',
					data: this.searchHistry
				});
			},
			search() {
				let msg = ''
				if (this.input.length == 0) msg = '请输入搜索内容'
				if (this.input.length > 60) msg = '搜索内容过长，请正确输入'
				if (msg) {
					uni.showToast({
						title: msg,
						duration: 2000,
						icon: 'none'
					});
					return
				}

				this.loading = true
				let this_ = this
				api.getList({
					count: 20,
					page: 0,
					name: this.input
				}).then(res_ => {
					if (this.searchHistry.indexOf(this.input) != -1)
						this.searchHistry.splice(this.searchHistry.indexOf(this.input), 1)
					this.searchHistry.splice(0, 0, this.input)
					this.searchHistry.splice(20, 999999)
					uni.setStorage({
						key: 'searchHistry',
						data: this_.searchHistry
					});
					this.loading = false;
					let res = res_.data.data.list
					if (res.length == 0) {
						uni.showToast({
							title: '没有相关内容',
							duration: 2000,
							icon: 'error'
						});
						this_.searchData = null
						this_.input = ''
						return
					}
					this_.searchData = res
					
				})
			},
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			},
			toInfoPage(e) {
				//跳转播放
				uni.navigateTo({
					url: '/pages/videoInfo/videoInfo?id=' + e.vod_id
				})
			}
		}
	}
</script>

<style>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	#tittleBar {
		background: rgba(255, 255, 255, 0);
		width: 100vw;
	}

	.tittleBar_bg {
		background: rgba(255, 255, 255, 255) !important;
		width: 100%;
		transition: 0.2s;
	}

	.tittleBar_bg .searchPush_item {
		color: #333;
		transition: 0.2s;
	}

	.tittleBar_bg .searchBox {
		background: #eee;
		transition: 0.2s;
	}


	.searchBar {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		overflow: hidden;
		height: 60rpx;
		margin-top: 30rpx;
		width: 100vw;
		overflow: hidden;
	}

	.searchBar>view {
		flex-shrink: 0;
	}

	.searchBox>view {
		flex-shrink: 0;
	}

	.searchBox {
		background: rgba(255, 255, 255, 0.4);
		border-radius: 30rpx;
		width: 100%;
		height: 100%;
		flex-shrink: 1 !important;
		display: flex;
		align-items: center;
		color: aliceblue;
		padding: 0 15rpx;
		transition: 0.2s;
		position: relative;
		justify-content: space-between;
	}

	.searchPush_item {
		width: 100%;
		color: #fff;
		font-size: 30rpx;
		padding: 0 0 0 10rpx;
		display: flex;
		align-items: center;
		transition: 0.2s;
		height: 60rpx;
		flex-shrink: 1 !important;
	}

	.module_tittle {
		font-size: 30rpx;
		font-weight: 600;
	}


	.scroll-view_H {
		white-space: nowrap;
		width: 100%;
	}
</style>